<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
            .base{
                width: 100%;
                height:100px;
                display: block;
                background: red;
            }

            .change{
                color: green;
                font-size: 30px;
                font-weight: 800,
            }
        </style>
    </head>
    <body>
    <div id="app" style="display:block;width:100%;float:left">
        <input type="text" v-model="n1" style="width:100px;" />
        <select  v-model="cal" style="width:100px;">
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">*</option>
            <option value="/">/</option>
        </select>
        <input type="text" v-model="n2" style="width:100px;"/>
        <button @click="getValue()">=</button>
        <input type="text" v-model="va" style="width:100px;"/>

        <div v-bind:class="div_class">12e</div>
    </div>
    <script src="../vue.min.js"></script>
    <script>
    new Vue({
        el:'#app',
        data:{
            n1:0,
            cal:'-',
            n2:0,
            va:0,
            div_class:{
                base:true,
                change:false
            }
        },
        methods:{
            getValue(){
                switch(this.cal){
                    case '+':
                        this.va = parseInt(this.n1)+parseInt(this.n2);
                        break;
                    case '-':
                        this.va = parseInt(this.n1)-parseInt(this.n2);
                        break;
                    case '*':
                        this.va = parseInt(this.n1)*parseInt(this.n2);
                        break;
                    case '/':
                        this.va = parseInt(this.n1)/parseInt(this.n2);
                        break;
                }

                this.div_class.change=true;
            }
        }
    });
    </script>
    </body>
</html>